//当用户点击提交按钮时,执行以下操作
//1. 获取用户输入的内容
//2. 将内容添加到ul列表中

//监听用户的点击事件
//获取form表单 因为这个按钮属于表单里面的元素
const form = document.querySelector('.form');
const input = document.querySelector('.form_input');
const ul = document.querySelector('.todo-list')
const toDoListArray = [];  //用于存储用户输入数据,便于删除
form.addEventListener('submit', function (e) {//用户点击提交按钮
    e.preventDefault(); //阻止表单默认点击按钮后刷新页面的行为
    let itemId = String(Date.now());   //生成一个唯一的id    Date.now()表示从1970年到现在过去了的毫秒数,每时每刻都在变化
    let toDoItem = input.value;   //获取用户输入的值
    addItemToArray(itemId, toDoItem);
    addItemToDom(itemId, toDoItem);
    input.value = '';

})
ul.addEventListener('click', function (e) {
    const target = e.target.getAttribute('data-id')  //获取li中对应的data-id的id值 也就是之前生成的 Date.now()
    removeItemFormArray(target);
    removeItemForemDom(target);
})
function addItemToArray(id, item) {
    toDoListArray.push({
        itemId: id,
        toDoItem: item
    })
}
function addItemToDom(id, item) {
    const li = document.createElement('li');
    li.textContent = item;
    li.setAttribute('data-id', id);//将id值给赋给data-id
    ul.appendChild(li);//添加li
}
function removeItemFormArray(id) {
    const index = toDoListArray.findIndex(item => item.itemId === id);//拿到要删除的id的索引
    if (index !== -1) {
        toDoListArray.splice(index, 1);
    }
}
function removeItemForemDom(id) {
    const ltIistems = ul.querySelectorAll('li');  //获取ul里面的所有li，放入listItems中
    listItems.forEach(item => {                   //遍历listItems数组，item就是正在遍历的li
        if (item.getAttribute('data-id') === id) {//如果从li中取出的data-id的值于要删除的id值相等，则删除该li
            ul.removeChild(item);
        }
    });
}